<template>
  <div class="orderSettlement">
    <!--    顶部标题栏-->
    <van-nav-bar
        :safe-area-inset-top="true"
        :placeholder="true"
        :fixed="true"
        title="订单结算"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
    >
    </van-nav-bar>
    <!--    地址栏-->
    <div class="address" @click="showAddress=true">
      <div class="top">
        <span>选择地址&nbsp;&nbsp;</span>
        <van-icon name="arrow"/>
      </div>
      <div class="center">
        <span class="name">{{ defaultAddress.name }}</span>
        <span>{{ defaultAddress.tel }}</span>
        <van-tag round type="primary" color="#0c34ba">{{ defaultAddress.isDefault === 1 ? '默认' : '' }}</van-tag>
      </div>
      <div class="desc">
        <span>{{ defaultAddress.addressDetail }}</span>
      </div>
    </div>
    <!--订单信息-->
    <div class="order">
      <div class="top">
        <span>订单信息</span>
      </div>
      <div class="list">
        <div class="item" v-for="(item,index) in orderList" :key="index">
          <div class="left">
            <img :src="item.small_img" class="auto-img">
          </div>
          <div class="right">
            <div class="top">
              <span class="name">{{ item.name }}</span>
              <span class="rule">{{ item.rule }}</span>
            </div>
            <div class="eName">
              <span>{{ item.enname|enName }}</span>
            </div>
            <div class="bom">
              <div class="price">
                <span>{{ item.price }}</span>
              </div>
              <div class="num">
                <span>x{{ item.count }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="total">
        <div class="time">
          <span>{{ total.time }}</span>
        </div>
        <div class="all">
          <div class="num">
            <span>共计</span>
            <span>{{ total.num }}</span>
            <span>件</span>
          </div>
          <div class="price">
            <span>合计￥</span>
            <span>{{ total.price }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="submit">
      <button type="submit" @click="pay">立即结算</button>
    </div>

    <!--  地址弹出层-->
    <van-popup
        v-model="showAddress"
        position="bottom"
        get-container="body">
      <van-cell title="选择地址" title-class="popup-cell-title">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="cross" @click="showAddress=false" size="25" color="#999"/>
        </template>
      </van-cell>
      <!-- 地址列表 -->
      <van-address-list
          v-model="chosenAddressId"
          :list="addressAll"
          default-tag-text="默认"
          @add="$router.push('addAddress')"
          @select="changeAddress"
      />
    </van-popup>
  </div>
</template>

<script>
import {findAddress} from "@/api/my";
import {commitShopcart, pay} from "@/api/shopbag";

export default {
  name: "orderSettlement",
  data() {
    return {
      sids: [],
      tokenString: "",
      defaultAddress: [],//默认地址
      addressAll: [],//所有地址
      showAddress: false,
      chosenAddressId: "",
      orderList: [],
      total: {
        time: "",
        num: 1.00,
        price: ""
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let self = this;
      this.sids = JSON.parse(this.$route.query.sids);
      self.tokenString = self.$cookies.get("tokenString");
      // 查询地址接口
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString
      }
      findAddress(data).then(res => {
        if (res.data.code === 20000) {
          self.addressAll = res.data.result;
          res.data.result.forEach(item => {
            if (item.isDefault === 1) {
              self.defaultAddress = item
              self.chosenAddressId = item.aid
            }
            item.address = item.addressDetail
            item.id = item.aid
          })
        } else {
          self.$toast.fail('登录状态异常，请重新登录！')
          self.$router.push('/login');
        }
      })
      let data2 = {
        appkey: self.appkey,
        tokenString: self.tokenString,
        sids: JSON.stringify(self.sids)
      }
      //   查询购买商品接口
      commitShopcart(data2).then(res => {
        if (res.data.code === 50000) {
          self.orderList = res.data.result
          let aData = new Date();
          let dateValue = aData.getFullYear() + "-"
              + ((aData.getMonth() + 1) > 9 ? (aData.getMonth() + 1) : '0' + (aData.getMonth() + 1)) + "-"
              + (aData.getDate() > 9 ? aData.getDate() : ('0' + aData.getDate())) + "  "
              + aData.getHours() + ":"
              + (aData.getMinutes() > 9 ? aData.getMinutes() : ('0' + aData.getMinutes())) + ":"
              + (aData.getSeconds() > 9 ? aData.getSeconds() : ('0' + aData.getSeconds()));
          self.total.time = dateValue;
          let totalPrice = 0;
          self.orderList.forEach(item => {
            self.total.num += item.count
            totalPrice += Number(item.price) * item.count
          })
          self.total.price = totalPrice
        }
      })
    },
    // 切换地址
    changeAddress(val) {
      this.defaultAddress = val
      this.chosenAddressId = val.sid
      this.showAddress = false;
    },
    //立即结算
    pay() {
      let self = this;
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString,
        sids: JSON.stringify(self.sids),
        phone: self.defaultAddress.tel,
        address: self.defaultAddress.address,
        receiver: self.defaultAddress.name,
      };
      pay(data).then(res => {
        if (res.data.code === 60000) {
          self.$toast.success({message: res.data.msg, duration: 1500})
          this.$router.push('/myOrder')
        } else {
          self.$toast.fail(res.data.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.orderSettlement {
  background: #f7f7f7;

  .address {
    background: #ffffff;
    padding: 5px 10px;
    margin: 8px;
    border-radius: 15px;

    div {
      margin: 9px 0;
    }

    .top {
      color: #666;
    }

    .center {
      .name {
        color: #0c34ba;
        font-weight: 600;
      }

      span {
        margin-right: 8px;
      }
    }

    .desc {
      color: #999999;
      font-size: 14px;
    }
  }

  .order {
    background: #ffffff;
    padding: 5px 10px;
    margin: 8px;
    border-radius: 15px;

    .top {
      color: #444444;
    }

    .list {
      border-bottom: 1px black dashed;

      .item {
        display: flex;
        margin: 10px 0;
        align-items: center;

        .left {
          flex: 3;
        }

        .right {
          flex: 7;
          margin-left: 10px;

          .top {

            span {
              margin-right: 10px;
            }

            .rule {
              font-size: 14px;
              color: #999999;
            }
          }

          .eName {
            margin: 5px 0;
            color: #777;
          }

          .bom {
            display: flex;
            margin-top: 20px;
            justify-content: space-between;

            .price {
              color: #0c34ba;
              font-weight: bold;
              font-size: 16px;
            }

            .num {
              color: #888;
            }
          }
        }
      }
    }

    .total {

      .time {
        color: #666666;
        margin: 10px 0;
        font-size: 14px;
      }

      .all {
        display: flex;
        justify-content: space-between;

        .num {
          color: #666666;
          font-size: 14px;
        }

        .price {
          color: #0c34ba;
          font-weight: bolder;
        }
      }
    }
  }

  .submit {
    padding: 5px 10px;

    button {
      border-radius: 15px;
      background: #0c34ba;
      border: none;
      color: white;
      width: 100%;
      height: 40px;
      line-height: 40px;
    }

  }
}

.popup-cell-title {
  font-size: 16px;
  color: #444;
  align-items: center;
}

/deep/ .van-address-item .van-radio__icon--checked .van-icon {
  background-color: #0c34ba;
  border-color: #0c34ba;
}

/deep/ .van-tag--danger {
  background-color: #0c34ba;
}

/deep/ .van-button--danger {
  color: #fff;
  background-color: #0c34ba;
  border: 1px solid #0c34ba;
}
</style>
